<!--
 * @Author: tlm
 * @Date: 2020-06-29 16:02:27
 * @LastEditTime: 2020-07-01 16:25:00
 * @LastEditors: tlm
 * @Description: 
 * @FilePath: \S3DV_WipSurfer\src\components\view\viewAttributeMain.vue
 * @support by tlm
--> 
<template>
  <div class="viewAttributeMain">
    <hsc-window-style-metal>
      <hsc-window
        :title="titleName"
        :closeButton="true"
        :resizable="true"
        :isOpen.sync="isOpen"
        :minWidth="150"
        :minHeight="200"
        :maxWidth="600"
        :maxHeight="680"
        :width.sync="width"
        :height.sync="height"
        :positionHint="positionHint"
        style="textAlign:left"
      >
        <el-scrollbar style="height:100%" :wrapStyle="[{'overflow-x':'hidden'}]">
          <!-- <wipInfo></wipInfo> -->
          <div class="wipInfo">
            <el-table
              :data="tableData"
              style="width: 100%"
              :stripe="true"
              :border="true"
              :highlight-current-row="true"
              :show-header="false"
              :cell-style="cellStyle"
              :fit="true"
            >
              <el-table-column align="center" label="key">
                <template slot-scope="{row}">
                  <span>{{ row.key }}</span>
                </template>
              </el-table-column>

              <el-table-column label="value">
                <template slot-scope="{row}">
                  <span>{{ row.value }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-divider class="wipdiv"></el-divider>
            <el-tabs v-model="activeKey" type="card">
              <el-tab-pane v-for="(item,i) in tabInfo" :key="i" :label="item.tabName">
                <el-table
                  v-for="(tableitem,j) in tabInfo[i].tableData"
                  :key="j"
                  :data="tableitem.row"
                  style="width: 100%"
                  :stripe="true"
                  :border="true"
                  :highlight-current-row="true"
                  :header-cell-style="{ 'background-color':'#9e9e9e','color':'#212121'}"
                  @row-click="handlerowclick"
                >
                  <el-table-column
                    align="center"
                    v-for="(headitem,k) in tableitem.head"
                    :key="k"
                    :label="headitem.name"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.attribute[k] }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-scrollbar>
      </hsc-window>
    </hsc-window-style-metal>
  </div>
</template>

<script>
import ComponentSignals from "@/utils/componentSignals";

let defaultWidth = document.body.clientWidth * 0.3;
let defaultHeight = (document.documentElement.clientHeight * 3) / 4;
let defaultX = document.body.clientWidth - defaultWidth;
let defaultpositionHint = defaultX + "/0";

export default {
  name: "viewAttributeMain",
  data() {
    return {
      isOpen: false,
      width: defaultWidth,
      height: defaultHeight,
      positionHint: defaultpositionHint,
      activeKey: "0",
      tableData: [],
      titleName: "",
      tabInfo: []
    };
  },
  components: {},
  created() {},
  mounted() {
    ComponentSignals.showAttribute.add(() => {
      this.isOpen = !this.isOpen;
    });
    ComponentSignals.setAttribute.add(data => {
      let table = [];
      let baseInfo = data.baseInfo;
      this.tabInfo = data.tabInfo;
      //
      let flag = Object.keys(baseInfo);
      if (flag.length === 0) {
        return;
      }
      this.titleName = baseInfo.attributeName;
      this.tableData = baseInfo.tableInfo;
    });
    ComponentSignals.clear.add(() => {
      this.tableData = [];
      this.titleName = "";
      this.tabInfo = [];
    });
  },
  methods: {
    cellStyle(row) {
      if (row.column.label === "key") {
        return "font-weight:bold; background-color:#9e9e9e";
      }
    },
    handlerowclick(row, column, event) {
      if (row.hasOwnProperty("modelName")) {
        ComponentSignals.selectObjByName.dispatch(row.modelName);
      }
    }
  }
};
</script>
<style scoped>
.wipInfo /deep/ .el-tabs__item.is-active
{
  /* background-color:#3399FF;
  color:#053949 !important; */
  /* color:#ffffff; */
  font-size: 14px;
}
.wipInfo /deep/ .el-table--small {
  font-size: 14px;
  color: #080808;
}
.wipInfo /deep/ .el-table--mini {
  font-size: 14px;
  color: #080808;
}
.wipInfo /deep/ .el-table__body tr.current-row > td {
  background: #888080 !important;
}

.wipInfo
  /deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td {
  background-color: #eeeeee;
}

/* .wipInfo /deep/ .el-table,
.el-table__expanded-cell {
  background-color: #33ccff;
} */

/* .wipInfo /deep/ .el-table tr {
  background-color: #33ccff !important;
}
.wipInfo /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: #33ccff;
} */
</style>
